<!-- 进行中案件 -->
<template>
    <div class="">
        <el-card class="!border-none" shadow="never">
            <div class="flex gap-2">
                <el-check-tag :checked="item.checked" @change="onChange(index)" v-for="(item, index) in caseType"
                    :key="item">{{
                        item.value }}</el-check-tag>
            </div>
            <div class="mt-4 mb-4">
                <el-checkbox v-model="item.checked" :label="item.value" border v-for="(item, index) in timeLimitted"
                    :key="index" size="small" />
            </div>
            <div>
                <el-row class="no-margin">
                    <el-col :span="3" class="col-with-border col-bg">
                        <div>
                            <span>新申请：</span>
                        </div>
                    </el-col>
                    <el-col :span="21" class="col-with-border">
                        <div class="mg_30">
                            <el-form-item>
                                <el-checkbox v-model="i.checked" :value="index" name="type"
                                    v-for="(i, index) in newApplication" :key="index">
                                    {{ i.value }}({{ i.length }})
                                </el-checkbox>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="no-margin">
                    <el-col :span="3" class="col-with-border col-bg">
                        <div>
                            <span>中间：</span>
                        </div>
                    </el-col>
                    <el-col :span="21" class="col-with-border">
                        <div class="mg_30">
                            <el-checkbox v-model="i.checked" :value="index" name="type" v-for="(i, index) in middleList"
                                :key="index">
                                {{ i.value }}({{ i.length }})
                            </el-checkbox>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="no-margin">
                    <el-col :span="3" class="col-with-border col-bg">
                        <div>
                            <span>处理事项：</span>
                        </div>
                    </el-col>
                    <el-col :span="21" class="col-with-border">
                        <div class="mg_30">
                            <el-form-item>
                                <el-checkbox v-model="i.checked" :value="index" name="type"
                                    v-for="(i, index) in handlingInformations" :key="index"
                                    v-show="open ? index >= 0 : index < 10">
                                    {{ i.value }}({{ i.length }})
                                </el-checkbox>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" style="float: right;" :icon="open ? ArrowUp : ArrowDown"
                                    @click="open = !open">{{ open ? '收起' : '打开' }}</el-button>
                            </el-form-item>
                        </div>

                    </el-col>
                </el-row>
            </div>
            <!-- 表格 -->
            <div class="flex justify-between mt-4">
                <div class="flex">
                    <div>
                        <el-button v-perms="['pendingCase:add']" type="primary" @click="showAdd = true">
                            <template #icon>
                                <icon name="el-icon-Plus" />
                            </template>
                            添加处理事项备注
                        </el-button>
                    </div>
                    <div class="ml-2">
                        <el-button v-perms="['pendingCase:add']" type="primary" @click="showUpdate = true">
                            <template #icon>
                                <icon name="el-icon-Plus" />
                            </template>
                            更新处理事项状态
                        </el-button>
                    </div>
                </div>
                <div>
                    <el-form ref="formRef" class="mb-[-16px]" :inline="true">
                        <el-form-item>
                            <el-input class="w-[280px]" placeholder="名称/申请号/我方文号/客户文号查询" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="resetPage">查询</el-button>
                            <el-button @click="resetParams">导出</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <el-table class="mt-4" size="large" :data="queryParams" stripe>
                <el-table-column type="selection" width="55" />
                <el-table-column label="编号" prop="id" min-width="100" />
                <el-table-column property="date" label="开卷日期" width="120" />
                <el-table-column property="ourRef" label="我方文号" width="120" />
                <el-table-column property="patentLabel" label="专利标签" width="120" />
                <el-table-column property="titleCause" label="案件名称" width="120" />
                <el-table-column property="handlingInformation" label="处理事项" width="120" />
                <el-table-column property="processState" label="处理状态" width="120" />
                <el-table-column property="applicationType" label="申请类型" width="120" />
                <el-table-column property="filingDate" label="配案日期" width="120" />
                <el-table-column property="officialDate" label="官方期限" width="120" />
                <el-table-column property="wearLife" label="内部期限" width="120" />
                <el-table-column property="customerPeriod" label="客户期限" width="120" />
                <el-table-column property="caseClerk" label="案件业务员" width="120" />
                <el-table-column property="pretrialCase" label="预案案件" width="120" />
                <el-table-column property="priorityReview" label="优先审查" width="120" />
                <el-table-column property="applicat" label="申请人" width="120" />
                <el-table-column property="client" label="客户" width="120" />
                <el-table-column property="handlingPerson" label="事项对外处理人" width="140" />
                <el-table-column property="transactionHandler" label="事项处理人" width="120" />
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
            <!-- 弹窗 -->
            <el-dialog v-model="showAdd" title="添加处理事项备注" width="500">
                <el-input v-model="handlingInformation" autocomplete="off" type="textarea" />
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="showAdd = false">取消</el-button>
                        <el-button type="primary" @click="showAdd = false">
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-dialog v-model="showUpdate" title="请选择处理状态" width="500">

                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in handlingInformations" :key="item.value" :label="item.value"
                        :value="item.value" />
                </el-select>

                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="showUpdate = false">取消</el-button>
                        <el-button type="primary" @click="showUpdate = false">
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>

        </el-card>
    </div>
</template>

<script lang="ts" setup>
import {
    ArrowUp,
    ArrowDown
} from '@element-plus/icons-vue'

import { ref } from 'vue'
const open = ref(false)
const showUpdate = ref(false)
const showAdd = ref(false)
const handlingInformation = ref()
const value = ref('')
const caseType = reactive([
    { checked: false, value: '专利' },
    { checked: false, value: '商标' },
    { checked: false, value: '版权' },
    { checked: false, value: '科技服务' },
    { checked: false, value: '调查案' },
    { checked: false, value: '法律案件' },
    { checked: false, value: '其他' },
])
const timeLimitted = reactive([
    { checked: false, value: '官方期限5天内' },
    { checked: false, value: '官方期限7天内' },
    { checked: false, value: '客户期限已逾期' },
    { checked: false, value: '客户期那限5天内' },
    { checked: false, value: '客户期限7天内' },
    { checked: false, value: '内部期那限5天内' },
    { checked: false, value: '内部期限7天内' },
])
const newApplication = reactive([
    { checked: false, value: '无状态', length: 2 },
    { checked: false, value: '配案中', length: 3 },
    { checked: false, value: '撰写中', length: 22 },
    { checked: false, value: '外部审核', length: 12 },
    { checked: false, value: '递交中', length: 255 },
    { checked: false, value: '完成', length: 12 },
    { checked: false, value: '结案', length: 76 },
    { checked: false, value: '待内审', length: 22 },
    { checked: false, value: '待发送发明人稿/待修', length: 42 },
    { checked: false, value: '请递交', length: 52 },
])
const middleList = reactive([
    { checked: false, value: '无状态', length: 2 },
    { checked: false, value: '配案中', length: 3 },
    { checked: false, value: '撰写中', length: 22 },
    { checked: false, value: '外部审核', length: 12 },
    { checked: false, value: '递交中', length: 255 },
    { checked: false, value: '完成', length: 12 },
    { checked: false, value: '结案', length: 76 },
    { checked: false, value: '待内审', length: 22 },
    { checked: false, value: '待发送发明人稿/待修', length: 42 },
    { checked: false, value: '请递交', length: 52 },
])
const handlingInformations = reactive([
    { checked: false, value: '调查', length: 2 },
    { checked: false, value: '检索分析', length: 3 },
    { checked: false, value: '立案', length: 22 },
    { checked: false, value: '新申请', length: 12 },
    { checked: false, value: '新申请', length: 255 },
    { checked: false, value: '一审', length: 12 },
    { checked: false, value: '发客户审核', length: 76 },
    { checked: false, value: '审理', length: 22 },
    { checked: false, value: '请求实审', length: 42 },
    { checked: false, value: '请求保密审查', length: 52 },
    { checked: false, value: '无效答辩', length: 2 },
    { checked: false, value: '撤回', length: 3 },
    { checked: false, value: '放弃', length: 22 },
    { checked: false, value: '结案', length: 12 },
    { checked: false, value: '进入国家阶段提醒..', length: 255 },
    { checked: false, value: '请求检索报告', length: 12 },
    { checked: false, value: '取得检索报告', length: 76 },
    { checked: false, value: '请求提前公开', length: 22 },
    { checked: false, value: '请求费用减缓', length: 42 },
    { checked: false, value: '翻译', length: 52 },
    { checked: false, value: '请求恢复权利', length: 2 },
    { checked: false, value: '办理DAS', length: 3 },
    { checked: false, value: '请求延长期那限', length: 22 },
    { checked: false, value: '缴纳申请费', length: 12 },
    { checked: false, value: '确认通知书', length: 255 },
    { checked: false, value: '初稿待反馈', length: 12 },
    { checked: false, value: '优先权提醒', length: 76 },
    { checked: false, value: '请求提前公开', length: 22 },
    { checked: false, value: '二稿', length: 42 },
    { checked: false, value: '发邮件', length: 52 },
])
const queryParams = reactive([
    {
        id: 1,
        date: '开卷日期',
        patentLabel: '专利标签',
        ourRef: '我方文号',
        titleCause: '案件名称',
        handlingInformation: '处理事项',
        processState: '处理状态',
        applicationType: '申请类型',
        filingDate: '配案日期',
        officialDate: '官方期限',
        wearLife: '内部期限',
        customerPeriod: '客户期限',
        caseClerk: '案件业务员',
        pretrialCase: '预审案件',
        priorityReview: '优先审查',
        applicat: '申请人',
        client: '客户',
        handlingPerson: '事项对外处理人',
        transactionHandler: '事项处理人',
    }
])




const onChange = (index: any) => {
    caseType[index].checked = !caseType[index].checked
}



//     //监听属性 类似于data概念
//     computed: {},
//     //监控data中的数据变化
//     watch: {},
//     //方法集合
//     methods: {},
//     //生命周期 - 创建完成（可以访问当前this实例）
//     created() { },
//     //生命周期 - 挂载完成（可以访问DOM元素）
//     mounted() { },
//     beforeCreate() { }, //生命周期 - 创建之前
//     beforeMount() { }, //生命周期 - 挂载之前
//     beforeUpdate() { }, //生命周期 - 更新之前
//     updated() { }, //生命周期 - 更新之后
//     beforeUnmount() { }, //生命周期 - 销毁之前
//     unmounted() { }, //生命周期 - 销毁完成
//     activated() { } //如果页面有keep-alive缓存功能，这个函数会触发

</script>
<style scoped>
.no-margin {
    margin: 0;
    /* 去除el-row的外边距 */
}

.mg_30 {
    margin-left: 30px;
}

.col-with-border {
    border: 1px solid #f2f2f2;
    display: flex;
    justify-content: right;
    align-items: center;
    border-radius: 0px;
}

.col-bg {
    background-color: #f2f2f2;
}

.justify-between {
    justify-content: space-between;
    align-items: center;
}

.officialDate-column {
    background-color: #b0070e;
}
</style>
